<template>
  <div id="app">
    <div class="father">
      <span>我父亲的年纪是{{fatherAge}}</span>
      <div class="son">我的年纪是{{sonAge / 2}}</div>
    </div>
    <div class="my">{{obj.uname.toUpperCase()}}</div>
    <div class="My">{{obj.age > 30 ? '年纪大了，不行了': '哎呦还不错哦'}}</div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        fatherAge:60,
        sonAge:36,
        obj:{
          uname:'zxy',
          age:'24'
        }
      }
    }
}
</script>

<style lang = 'less'>
#app {
  width: 500px;
  height: 500px;
  text-align: center;
  margin: 0 auto;
  background-color: #087;
  .father{
    width: 100%;
    height: 200px;
    padding-top: 80px;
    margin: auto;
    color: #fff;
    font-size: 20px;
    
  }
  .my{
     width: 100%;
    height: 100px;
    margin: auto;
    color: pink;
    font-size: 30px;
  }
  .My{
     width: 100%;
    height: 100px;
    margin: auto;
    color: skyblue;
    font-size: 40px;
  }
}
</style>
